import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Button, Table, Alert } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './CourseGrade.less';

const FormItem = Form.Item;
const { Option } = Select;
const columns = [
  {
    title: '学号',
    dataIndex: 'sno',
    align: 'center',
  },
  {
    title: '姓名',
    dataIndex: 'sname',
    align: 'center',
  },
  {
    title: '课程号',
    dataIndex: 'cno',
    align: 'center',
  },
  {
    title: '课程名',
    dataIndex: 'cname',
    align: 'center',
  },
  {
    title: '课程成绩',
    dataIndex: 'grade',
    align: 'center',
  },
];

@connect(({ course, grade, loading }) => ({
  courseList: course.courseList,
  courseGrade: grade.courseGrade,
  loading: loading.effects['grade/fetchCourseGrade'],
}))
@Form.create()
export default class CourseGrade extends PureComponent {
  state = {
    user: '',
    role: 'studnet',
  };

  componentWillMount() {
    this.setState({
      role: localStorage.getItem('role'),
      user: localStorage.getItem('userno'),
    });
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { user, role } = this.state;
    dispatch({
      type: 'course/fetchCourseList',
      payload: {},
    });
    if (role === 'student') {
      dispatch({
        type: 'grade/fetchCourseGrade',
        payload: {
          sno: user,
        },
      });
    } else {
      dispatch({
        type: 'grade/fetchCourseGrade',
      });
    }
  }

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    const { user, role } = this.state;
    form.resetFields();
    if (role === 'student') {
      dispatch({
        type: 'grade/fetchCourseGrade',
        payload: {
          sno: user,
        },
      });
    } else {
      dispatch({
        type: 'grade/fetchCourseGrade',
      });
    }
  };

  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    const { user, role } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (role === 'student') {
        dispatch({
          type: 'grade/fetchCourseGrade',
          payload: {
            ...fieldsValue,
            sno: user,
          },
        });
      } else {
        dispatch({
          type: 'grade/fetchCourseGrade',
          payload: fieldsValue,
        });
      }
    });
  };

  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    const { courseList } = this.props;
    const { role } = this.state;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          {role !== 'student' ? (
            <Col md={8} sm={24}>
              <FormItem label="学号">
                {getFieldDecorator('sno')(<Input placeholder="请输入学号" />)}
              </FormItem>
            </Col>
          ) : null}
          <Col md={8} sm={24}>
            <FormItem label="课程">
              {getFieldDecorator('cno')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  {courseList.map(item => {
                    return (
                      <Option key={item.cno} value={item.cno}>
                        {item.cname}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { loading, courseGrade } = this.props;
    return (
      <PageHeaderLayout title="查看课程成绩">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
            <Alert message="课程成绩" type="info" showIcon />
            <Table
              rowKey={(record, index) => index}
              loading={loading}
              dataSource={courseGrade}
              columns={columns}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
